<template>
  <el-dialog
    v-model="dialogVisible"
    append-to-body
    title="静态数据"
    width="800"
  >
    <json-editor-vue
      class="h-[600px]"
      :modeList="couldView"
      v-model="state"
      @validationError="validationError"
      :currentMode="'code'"
    />

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="confirm">确定</el-button>

        <el-button @click="close">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import JsonEditorVue from "json-editor-vue3";
interface PropsType {
  staticData: any;
}
let props = withDefaults(defineProps<PropsType>(), {
  staticData: () => ({}),
});
const dialogVisible = ref(false);
const emit = defineEmits(["updateStaticData", "close"]);
const couldView = ref(["tree", "code", "form", "view"]);

let state = ref();
let errorsList = ref<any>([]);
watch(
  props,
  (value) => {
    // console.log("watch", value);
    state.value = value.staticData;
  },
  {
    immediate: true,
    deep: true,
  }
);
const close = () => {
  dialogVisible.value = false;
  emit("close");
};
const confirm = () => {
  if (errorsList.value.length > 0) {
    ElMessage.error("JSON格式错误");
    return;
  }
  emit("updateStaticData", state.value);
  close();
};
const validationError = (editor, errors) => {
  // console.log(editor, errors);
  errorsList.value = errors;
};
defineExpose({
  dialogVisible,
});
</script>

<style scoped lang="scss"></style>
